<template>
    <div>
        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    计划列表
                </div>
                <div class="flexbox flexcenter">
                    <!-- <el-button type="primary" size="small" icon="el-icon-circle-plus-outline">复制任务</el-button> -->
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun" style="margin-left:0">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter max_width">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">创建状态</span>
                            <span class="drop_title">{{status_text.length>0?status_text.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':status_text.length>0}">已选 {{status_text.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilter('status_text','status')" v-if="status_text.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.status" class="check_style" @change="changeStatus">
                                <el-radio :label="item.id" v-for="(item,index) in statusList" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="flexbox flexcenter" style="width:495px">
                    <!-- <el-date-picker style="width:260px;margin-left:5px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker> -->
                    <el-input style="width:216px;margin-left:12px" clearable size="small" placeholder="计划名称、广告账户/ID" suffix-icon="el-icon-search" v-model="queryInfo.advertiser" @change="getDataList(1)">
                    </el-input>
                </div>
            </div>
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <el-table :data="tableData" class="com_table" max-height="700px">
                    <el-table-column prop="id" label="编号" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="计划名称" min-width="170">
                    </el-table-column>
                    <el-table-column prop="name" label="营销目标" width="180">
                        <template slot-scope="scope">
                            <template v-if="scope.row.target=='VIDEO_PROM_GOODS'">
                                短视频/图文带货
                            </template>
                            <template v-else>
                                直播带货
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mode" label="推广方式" width="130">
                        <template slot-scope="scope">
                            <template v-if="scope.row.promotion_way=='STANDARD'">
                               专业推广
                            </template>
                            <template v-else-if="scope.row.promotion_way=='SIMPLE'">
                               极速推广
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="广告账户" width="300">
                        <template slot-scope="scope">
                            <div class="color_01">{{scope.row.advertiser_name}}</div>
                            <div class="color_03 plan_id">ID：{{scope.row.advertiser_id}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="抖音号" width="260">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <img :src="scope.row.aweme_img" class="dy_head" width="36" height="36" alt="">
                                <div class="ml_12">
                                    <div class="color_01">{{scope.row.aweme_name}}</div>
                                    <div class="color_03 plan_id">ID：{{scope.row.aweme_id}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品信息" width="260" v-if="$route.query.type=='VIDEO_PROM_GOODS'">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <img :src="scope.row.product_img" class="sp_head" width="56" height="56" alt="">
                                <div class="ml_12 shop_width">
                                    <div class="color_01 shop_name">{{scope.row.product_name}}</div>
                                    <div class="color_03 plan_id">ID：{{scope.row.product_id}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_num" label="任务状态" width="120" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-link type="info" :underline="false" v-if="scope.row.status==1">等待执行</el-link>
                            <el-link type="warning" :underline="false" v-else-if="scope.row.status==2">执行中</el-link>
                            <el-link type="primary" :underline="false" v-else-if="scope.row.status==3">创建成功</el-link>
                            <el-link type="danger" :underline="false" v-else-if="scope.row.status==4">
                                创建失败 
                                <el-tooltip class="item" effect="dark" :content="scope.row.err_msg" placement="top-start">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            type:'',
            queryInfo: {
                status: "",
                page: 1,
                limit: 20,
                advertiser: "",
                id: "",
            },
            status_text: [],
            statusList: [
                {
                    id: 1,
                    nickname: "等待执行",
                },
                {
                    id: 2,
                    nickname: "执行中",
                },
                {
                    id: 3,
                    nickname: "创建成功",
                },
                {
                    id: 4,
                    nickname: "创建失败",
                },
            ],
            showrank: true,
            loading: false,
            total: 1,
            setpage: 1,
            tableData: [
                {
                    name: "1",
                },
            ],
        };
    },
    created() {
        // this.type = this.$route.query.type
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.queryInfo.id = this.$route.query.id;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/Task/task_info",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 时长筛选
        changeStatus() {
            let val = this.statusList.filter((item) => {
                if (item.id == this.queryInfo.status) {
                    return item;
                }
            });
            this.status_text = [val[0].nickname];
            this.getDataList(1);
        },

        // 清除已选
        clearFilter(text, id) {
            this.queryInfo[id] = "";
            this[text] = [];
            this.getDataList(1);
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
                query: {
                    day: JSON.stringify(this.yearData),
                },
            });
        },

        // 重置
        resetFun() {
            this.queryInfo.status = "";
            this.queryInfo.advertiser = "";
            this.status_text = [];
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.dy_head {
    border-radius: 50%;
}
.ml_12 {
    margin-left: 12px;
}
.shop_name {
    height: 22px;
    line-height: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.shop_width {
    min-width: 0;
}
.plan_id {
    line-height: 22px;
    margin-top: 2px;
    height: 22px;
}
</style>

